<template>
  <div class="accountManage">
    <!--账号管理---------面包屑-->
    <a-breadcrumb style="text-align: left;font-size: 16px;margin-left: 15px;margin-bottom: -10px">
      <a-breadcrumb-item>首页</a-breadcrumb-item>
      <a-breadcrumb-item>系统管理</a-breadcrumb-item>
      <a-breadcrumb-item>账号管理</a-breadcrumb-item>
    </a-breadcrumb>
    <!--账号管理---------分割线-->
    <a-divider/>
    <!--账号管理---------新增表单-->
    <div class="btn">
      <div class="left">
        <a-button type="danger" @click="showModal">添加账号</a-button>
      </div>
      <div class="right">
        <a-input-search placeholder="账号名称" style="width: 200px" @search="onSearch"/>
      </div>
      <a-modal v-model="visible" title="注册账号" :maskClosable="false" :closable="false">
        <template slot="footer">
          <a-button key="back" @click="handleCancel">取消</a-button>
          <a-button key="submit" type="primary" @click="onSubmit">提交</a-button>
        </template>
        <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rules" ref="ruleForm">
          <a-form-model-item label="账号名称：" prop="nickname">
            <a-input v-model="form.nickname" @input="getPinYin"/>
          </a-form-model-item>
          <a-form-model-item label="账号登录名：">
            <a-input v-model="form.username" :disabled="true"/>
          </a-form-model-item>
          <a-form-model-item label="账号密码：">
            <a-input v-model="form.password" :disabled="true"/>
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </div>
    <!--系统管理---------账号数据列表-->
    <a-table :columns="columns" :data-source="data" :loading="loadFlag" :pagination="false" :bordered="true">
      <span slot="isDisable" slot-scope="text, record">
        <a-switch checked-children="启用" un-checked-children="禁用"
                  :checked="Boolean(record.user_use === '0')" @change="lockUser($event, record)"/>
      </span>
    </a-table>
    <!--系统管理---------分页器-->
    <div class="pagination">
      <a-locale-provider :locale="zhCN">
        <a-pagination
          v-model="pageIndex"
          :total="total"
          :show-total="total => `共 ${total} 条数据`"
          :page-size="pageSize"
          @showSizeChange="onShowSizeChange"
          @change="pageChange"
        >
          <template slot="buildOptionText" slot-scope="props">
            <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
            <span v-if="props.value === '50'">全部</span>
          </template>
        </a-pagination>
      </a-locale-provider>
    </div>
  </div>
</template>

<script>
import zhCN from 'ant-design-vue/es/locale-provider/zh_CN'
import pinyin from 'js-pinyin'
import qs from 'qs'
import {addUser, getAccountList, lockUser} from '../http/api'

const columns = [
  {
    title: '用户名',
    dataIndex: 'nick_name',
    align: 'center',
    width: 150
  }, {
    title: '登录名',
    dataIndex: 'user_name',
    align: 'center',
    width: 150
  }, {
    title: '账号状态',
    dataIndex: 'user_use',
    scopedSlots: {customRender: 'isDisable'},
    align: 'center',
    width: 150
  }
]
const data = []

export default {
  inject: ['reload'],
  data() {
    return {
      // 表格加载判断
      loadFlag: false,
      // 表格字段
      columns,
      data,
      // formModel 表单布局数据
      labelCol: {span: 5},
      wrapperCol: {span: 16},
      // formModel 表单默认数据
      form: {
        nickname: '',
        username: '',
        password: '123456'
      },
      // formModel 表单验证规则
      rules: {
        nickname: [
          {required: true, message: '请输入用户名', trigger: 'blur'}
        ]
      },
      // formModel 表单开关判断
      visible: false,
      // 搜索框文本
      searchValue: '',
      // 组件汉化
      zhCN,
      // 分页器数据
      total: 0,
      pageIndex: 1,
      pageSize: 4
    }
  },
  methods: {
    // 获取账号数据
    async getAccountList() {
      await getAccountList({
        searchValue: this.searchValue,
        pageIndex: this.pageIndex,
        pageSize: this.pageSize
      }).then(res => {
        this.data = res.data.data
        this.total = res.data.total
        // 加载动作
        setTimeout(() => {
          this.loadFlag = false
        }, 100)
      })
    },
    // 打开注册账号的 Model
    showModal() {
      this.visible = true
      this.loadFlag = true
      this.$refs.ruleForm.resetFields()
    },
    // 关闭注册账号的 Model
    handleCancel(e) {
      this.visible = false
      this.loadFlag = false
    },
    // 获取到搜素框输入的文本，在调用 getAccountList() 重新查询账号信息
    onSearch(value) {
      this.searchValue = value
      this.$message.success('查询成功')
      this.getAccountList()
    },
    // 注册账号提交表单
    onSubmit() {
      this.$refs.ruleForm.validate(valid => {
        console.log(valid)
        if (valid) {
          addUser(qs.stringify(this.form)).then(res => {
            this.$message.success(res.msg)
            this.loadFlag = false
            this.reload()
          })
        }
      })
    },
    // 根据用户名自动填入登录名
    getPinYin() {
      this.form.username = pinyin.getFullChars(this.form.nickname)
    },
    // 锁定账号，禁止登录
    lockUser(e, val) {
      let user = { uid: val.user_id }
      if (e) user.isDisable = 0
      else user.isDisable = 1
      lockUser(qs.stringify(user))
        .then(res => {
          if (res.status === 200) {
            this.$message.success(res.msg)
            this.reload()
          }
        })
    },
    // 分页函数-点击换页函数
    pageChange(current, pageSize) {
      this.pageIndex = current
      this.pageSize = pageSize
      this.getAccountList()
    },
    // 分页函数-每页显示条目函数
    onShowSizeChange(current, pageSize) {
      this.pageSize = pageSize
      this.getAccountList()
    }
  },
  created() {
    this.loadFlag = true
    this.getAccountList()
  }
}
</script>
<style lang="less" scoped>
.left {
  text-align: left;
  margin-left: 20px;
  margin-bottom: 15px;
  float: left;
}

.right {
  text-align: right;
  margin: 15px 20px;
}

.pagination {
  margin: 15px 20px;
  text-align: right
}
</style>
